<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lumina AI - 让学习 AI 变简单</title>
  <!-- Tailwind 本地兜底 + CDN -->
  <script src="../assets/js/tailwindcss.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#FFE45C',
            secondary: '#FFE45C',
            accent: '#10B981'
          },
          borderRadius: {
            'none': '0px',
            'sm': '2px',
            DEFAULT: '4px',
            'md': '8px',
            'lg': '12px',
            'xl': '16px',
            '2xl': '20px',
            '3xl': '24px',
            'full': '9999px',
            'button': '8px'
          },
          animation: {
            'fade-in': 'fadeIn 0.6s ease-in-out',
            'slide-up': 'slideUp 0.8s ease-out',
            'bounce-gentle': 'bounceGentle 2s infinite'
          },
          keyframes: {
            fadeIn: {
              '0%': { opacity: '0' },
              '100%': { opacity: '1' }
            },
            slideUp: {
              '0%': { transform: 'translateY(30px)', opacity: '0' },
              '100%': { transform: 'translateY(0)', opacity: '1' }
            },
            bounceGentle: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' }
            }
          }
        }
      }
    }
  </script>
  <!-- <link rel="preconnect" href="https://fonts.googleapis.com"> -->
  <!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -->
  <link href="../assets/css/google-fonts-pacifico-inter.css" rel="stylesheet">
  <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
  <link href="../assets/css/lemon-milk.css" rel="stylesheet">
  <link href="../assets/css/google-fonts-montserrat.css" rel="stylesheet">
  <link href="../assets/css/index.css" rel="stylesheet">
  <link href="../assets/css/BlogsIndex.css" rel="stylesheet">
</head>
<body class="font-inter bg-gray-50 text-neutral-700 min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <header class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-md z-50 border-b border-gray-100 shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="../index.html" class="flex items-center gap-3">
                <span class="text-2xl text-black" style="font-family: 'Montserrat', Arial, sans-serif;">lumina AI</span>
            </a>
        </div>
        
        <!-- 桌面端导航 -->
        <nav class="hidden md:flex items-center gap-8 justify-center flex-1">
            <a href="../index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">主页</a>
            <a href="../AiEntry/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI词条</a>
            <a href="../AiOpen/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI开源</a>
            <a href="../AiHardware/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI硬件</a>
            <a href="./index.html" class="text-[#FFE45C] font-medium transition-colors duration-200">指令库</a>
            <a href="../AiBlog/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">博客</a>
        </nav>
        
        <!-- 工具区域：微信、知识星球、登陆 -->
        <div class="flex items-center gap-4">
            <button class="flex items-center gap-1 text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg px-3 py-2 transition-all duration-200">
                <i class="fab fa-weixin"></i>
                <!-- <span class="hidden sm:inline">微信</span> -->
            </button>
            <button class="flex items-center gap-1 text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg px-3 py-2 transition-all duration-200">
                <i class="fas fa-globe"></i>
                <!-- <span class="hidden sm:inline">知识星球</span> -->
            </button>
            <button class="flex items-center gap-1 text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg px-3 py-2 transition-all duration-200">
                <i class="fas fa-user"></i>
                <!-- <span class="hidden sm:inline">登陆</span> -->
            </button>
            <!-- 移动端菜单按钮 -->
            <button class="md:hidden w-10 h-10 flex items-center justify-center text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg transition-all duration-200" onclick="toggleMobileMenu()">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="md:hidden hidden bg-white border-t border-gray-100">
        <div class="px-4 py-6 space-y-4">
            <a href="../index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">主页</a>
            <a href="../AiEntry/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">AI词条</a>
            <a href="../AiOpen/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">AI开源</a>
            <a href="../AiHardware/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">AI硬件</a>
            <a href="./index.html" class="block text-[#FFE45C] font-medium py-2">指令库</a>
            <a href="../AiBlog/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">博客</a>
        </div>
    </div>
</header>

      <main class="pt-16 flex-1">
    <!-- 固定在顶部的搜索和筛选区域 -->
    <div id="stickySearchFilter" class="fixed top-16 left-0 right-0 z-40 bg-white/95 backdrop-blur-md border-b border-gray-200 shadow-sm transform -translate-y-full transition-transform duration-300">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div class="flex items-center gap-4">
          <!-- 搜索框 -->
          <div class="flex-1 relative">
            <input 
              type="text" 
              id="stickySearchInput" 
              placeholder="搜索提示词..." 
              class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm transition-all duration-200"
            >
            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
          </div>
          
          <!-- 标签筛选 -->
          <div class="flex items-center gap-2">
            <div id="stickyFilterTags" class="flex flex-wrap gap-2">
              <!-- 标签将通过JavaScript动态生成 -->
            </div>
            <button 
              id="stickyClearFilters" 
              class="text-xs text-gray-500 hover:text-primary transition-colors duration-200 flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100"
            >
              <i class="fas fa-times mr-1"></i>
              清除
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 指令库头部 -->
    <section class="relative bg-gradient-to-br from-white via-gray-50 to-white border-b border-gray-200 overflow-hidden prompts-header">
        <!-- 流体动画背景 -->
        <div class="absolute inset-0 z-0">
                            <div class="fluid-animation">
                    <div class="fluid-blob blob-1"></div>
                    <div class="fluid-blob blob-2"></div>
                    <div class="fluid-blob blob-3"></div>
                    <div class="fluid-blob blob-4"></div>
                    <div class="fluid-blob blob-5"></div>
                    <div class="fluid-blob blob-6"></div>
                </div>
        </div>
        
        <!-- 主要内容区域 -->
        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- 标题区域 -->
            <div class="text-center py-16 sm:py-20 lg:py-24">
                <div class="mb-8">
                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
                        AI指令提示库
                    </h1>
                    <p class="text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
                        探索、分享和发现最优质的AI提示词，提升你的创作效率
                    </p>
                </div>
                
                <!-- 搜索和筛选区域 -->
                <div id="searchFilterContainer" class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 sm:p-8 shadow-lg border border-gray-100/50 max-w-4xl mx-auto">
                    <!-- 搜索功能 -->
                    <div class="mb-6">
                        <div class="relative">
                            <input 
                                type="text" 
                                id="searchInput" 
                                placeholder="搜索提示词..." 
                                class="w-full pl-12 pr-4 py-4 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-lg transition-all duration-200 hover:border-gray-300"
                            >
                            <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                        </div>
                    </div>
                    
                    <!-- 标签筛选 -->
                    <div>
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="text-sm font-semibold text-gray-700 flex items-center">
                                <i class="fas fa-tags mr-2 text-primary"></i>
                                按分类筛选
                            </h4>
                            <div class="flex items-center gap-2">
                                <button 
                                    id="clearFilters" 
                                    class="text-sm text-gray-500 hover:text-primary transition-colors duration-200 flex items-center gap-1 px-3 py-1 rounded-lg hover:bg-gray-100"
                                >
                                    <i class="fas fa-times mr-1"></i>
                                    清除筛选
                                </button>
                               
                            </div>

                        </div>
                        <div id="filterTags" class="flex flex-wrap gap-3">
                            <!-- 标签将通过JavaScript动态生成 -->
                        </div>
                     
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 主要内容区域 -->
    <section class="py-8 sm:py-12">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <!-- 结果统计与排序 -->
        <div class="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div class="flex items-center gap-4">
            <h2 class="text-lg font-semibold text-neutral-700" id="search-results-count">共找到 <span></span> 个提示词</h2>
            <div id="search-loading" class="hidden">
              <div class="loading-spinner"></div>
              <span class="text-sm text-gray-500 ml-2">搜索中...</span>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <div id="search-stats" class="text-sm text-gray-500 hidden">
              <span id="search-time"></span>
            </div>
           
          </div>
        </div>
        
        <!-- 内容列表区 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="prompt-list">

         
        </div>
        
        <!-- 空状态提示 -->
        <div class="hidden text-center py-16" id="empty-state">
          <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-neutral-100 mb-4">
            <i class="fa fa-search text-neutral-400 text-3xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-neutral-700 mb-2">没有找到匹配的提示词</h3>
          <p class="text-neutral-500 mb-6">请尝试使用不同的关键词或调整筛选条件</p>
         
        </div>
        
        <!-- 加载更多按钮 -->
        <!-- <div class="mt-10 text-center">
          <button class="px-6 py-3 bg-white border border-neutral-200 rounded-full text-neutral-700 hover:bg-neutral-50 transition-colors shadow-sm flex items-center mx-auto" id="load-more">
            加载更多
            <i class="fa fa-angle-down ml-2"></i>
          </button>
        </div> -->
      </div>
    </section>
  </main>

  <!-- Modal 弹窗结构 -->
  <div id="prompt-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 hidden">
    <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full h-[41rem] flex flex-col relative">
      <!-- 顶部：name与关闭按钮水平对齐 -->
      <div class="flex items-center h-16 px-6 border-b">
        <h2 class="text-2xl font-bold text-neutral-700 text-left flex-1" id="modal-title"></h2>
        <button id="prompt-modal-close" class="ml-4 text-gray-400 hover:text-primary text-2xl font-bold flex-shrink-0">&times;</button>
      </div>
      <!-- prompt内容区域可滚动，支持markdown渲染 -->
      <div class="flex-1 overflow-y-auto px-6 py-4 text-sm text-neutral-700 break-words markdown-body" id="modal-prompt"></div>
      <!-- 底部操作栏，复制按钮垂直居中 -->
      <div class="px-6 py-3 border-t flex items-center justify-end bg-white rounded-b-xl h-16">
        <button class="w-10 h-10 flex items-center justify-center rounded-full bg-neutral-200 hover:bg-neutral-300 text-gray-600 text-xl" id="modal-copy-btn" title="复制"><i class="fa fa-copy"></i></button>
      </div>
    </div>
  </div>

  <!-- JavaScript -->
  <script src="../assets/js/marked.min.js"></script>
  <script>
    // 全局变量
    let allData = [];
    let filteredData = [];
    let currentPage = 0;
    const pageSize = 20;
    let selectedTags = [];
    let searchQuery = '';
    let loading = false;
    let hasMore = true;

    // 类型标签颜色映射
    const typeColors = {
      'AI': 'bg-blue-100 text-blue-600',
      '内容创作': 'bg-green-100 text-green-600',
      '设计创意': 'bg-pink-100 text-pink-600',
      '编程开发': 'bg-yellow-100 text-yellow-600',
      '商业文案': 'bg-purple-100 text-purple-600',
      '教育学习': 'bg-indigo-100 text-indigo-600',
      '生活助手': 'bg-red-100 text-red-600',
      'SVG': 'bg-gray-100 text-gray-600',
      'default': 'bg-gray-100 text-gray-600'
    };

    const avatarColors = [
      'bg-pink-200', 'bg-blue-200', 'bg-green-200', 'bg-yellow-200', 'bg-purple-200',
      'bg-indigo-200', 'bg-red-200', 'bg-teal-200', 'bg-orange-200', 'bg-gray-200'
    ];

    // 获取头像颜色
    function getAvatarColor(name) {
      let hash = 0;
      for (let i = 0; i < name.length; i++) {
        hash = name.charCodeAt(i) + ((hash << 5) - hash);
      }
      return avatarColors[Math.abs(hash) % avatarColors.length];
    }

    // 高亮搜索关键词
    function highlightSearchResult(text, searchQuery) {
      if (!searchQuery) return text;
      const regex = new RegExp(`(${searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
      return text.replace(regex, '<mark class="bg-yellow-200 px-1 rounded">$1</mark>');
    }

    // 根据标签选择图标
    function getPromptIcon(tags) {
      if (!tags || tags.length === 0) return 'fas fa-lightbulb';
      
      const firstTag = tags[0].toLowerCase();
      const iconMap = {
        'svg': 'fas fa-palette',
        'html': 'fas fa-code',
        '文本': 'fas fa-file-alt',
        '前端': 'fas fa-laptop-code',
        '设计': 'fas fa-paint-brush',
        '编程': 'fas fa-terminal',
        'ai': 'fas fa-robot',
        '创意': 'fas fa-lightbulb',
        '商业': 'fas fa-briefcase',
        '教育': 'fas fa-graduation-cap',
        '生活': 'fas fa-home',
        '工具': 'fas fa-tools'
      };
      
      for (const [key, icon] of Object.entries(iconMap)) {
        if (firstTag.includes(key)) {
          return icon;
        }
      }
      
      return 'fas fa-lightbulb';
    }

    // 加载数据
    async function loadData() {
      try {
        const response = await fetch('../data/完美提示词_格式化.json');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        allData = await response.json();
        console.log('数据加载成功:', allData.length);
        
        // 初始化标签
        initTags();
        
        // 执行初始筛选
        filterData();
        
        // 加载第一页
        loadMore();
      } catch (error) {
        console.error('数据加载失败:', error);
        const promptList = document.getElementById('prompt-list');
        if (promptList) {
          promptList.innerHTML = '<div class="text-center py-8 text-red-500">数据加载失败，请刷新页面重试</div>';
        }
      }
    }

    // 初始化标签
    function initTags() {
      const tagSet = new Set();
      allData.forEach(item => {
        if (Array.isArray(item.tags)) {
          item.tags.forEach(tag => tagSet.add(tag));
        }
      });

      const filterTags = document.getElementById('filterTags');
      const stickyFilterTags = document.getElementById('stickyFilterTags');
      
      if (filterTags) {
        filterTags.innerHTML = '<button class="px-4 py-2 rounded-full bg-primary text-white tag-active transition-all" data-category="全部">全部</button>';
        Array.from(tagSet).forEach(tag => {
          const btn = document.createElement('button');
          btn.className = 'px-4 py-2 rounded-full bg-white border border-neutral-200 text-neutral-600 hover:bg-neutral-50 transition-all';
          btn.setAttribute('data-category', tag);
          btn.textContent = tag;
          filterTags.appendChild(btn);
        });
        
        // 绑定标签点击事件
        const tags = filterTags.querySelectorAll('button');
        tags.forEach(tag => {
          tag.addEventListener('click', () => {
            // 移除所有标签的激活状态
            document.querySelectorAll('#filterTags button, #stickyFilterTags button').forEach(t => {
              t.classList.remove('tag-active');
              t.classList.add('bg-white', 'border', 'border-neutral-200', 'text-neutral-600');
              t.classList.remove('bg-primary', 'text-white');
            });
            
            // 添加当前标签的激活状态
            tag.classList.add('tag-active');
            tag.classList.remove('bg-white', 'border', 'border-neutral-200', 'text-neutral-600');
            tag.classList.add('bg-primary', 'text-white');
            
            // 更新选中的标签
            const selectedTag = tag.getAttribute('data-category');
            if (selectedTag === '全部') {
              selectedTags = [];
            } else {
              selectedTags = [selectedTag];
            }
            
            // 重新筛选
            filterData();
          });
        });
      }

      if (stickyFilterTags) {
        stickyFilterTags.innerHTML = '<button class="px-3 py-1 rounded-full bg-primary text-white tag-active transition-all text-sm" data-category="全部">全部</button>';
        Array.from(tagSet).forEach(tag => {
          const btn = document.createElement('button');
          btn.className = 'px-3 py-1 rounded-full bg-white border border-neutral-200 text-neutral-600 hover:bg-neutral-50 transition-all text-sm';
          btn.setAttribute('data-category', tag);
          btn.textContent = tag;
          stickyFilterTags.appendChild(btn);
        });
        
        // 绑定固定标签点击事件
        const stickyTags = stickyFilterTags.querySelectorAll('button');
        stickyTags.forEach(tag => {
          tag.addEventListener('click', () => {
            // 移除所有标签的激活状态
            document.querySelectorAll('#filterTags button, #stickyFilterTags button').forEach(t => {
              t.classList.remove('tag-active');
              t.classList.add('bg-white', 'border', 'border-neutral-200', 'text-neutral-600');
              t.classList.remove('bg-primary', 'text-white');
            });
            
            // 添加当前标签的激活状态
            tag.classList.add('tag-active');
            tag.classList.remove('bg-white', 'border', 'border-neutral-200', 'text-neutral-600');
            tag.classList.add('bg-primary', 'text-white');
            
            // 更新选中的标签
            const selectedTag = tag.getAttribute('data-category');
            if (selectedTag === '全部') {
              selectedTags = [];
            } else {
              selectedTags = [selectedTag];
            }
            
            // 重新筛选
            filterData();
          });
        });
      }
    }

    // 筛选数据
    function filterData() {
      const searchInput = document.getElementById('searchInput');
      const stickySearchInput = document.getElementById('stickySearchInput');
      
      // 获取搜索词
      let query = '';
      if (searchInput && searchInput.value) {
        query = searchInput.value.toLowerCase().trim();
      } else if (stickySearchInput && stickySearchInput.value) {
        query = stickySearchInput.value.toLowerCase().trim();
      }
      searchQuery = query;

      // 筛选数据
      filteredData = allData.filter(item => {
        const name = (item.name || '').toLowerCase();
        const usage = (item.usage || '').toLowerCase();
        const author = (item.author || '').toLowerCase();
        const prompt = (item.prompt || '').toLowerCase();
        const tags = Array.isArray(item.tags) ? item.tags : [];
        
        // 检查是否匹配搜索词
        const matchesSearch = !query || 
                             name.includes(query) || 
                             usage.includes(query) || 
                             author.includes(query) ||
                             prompt.includes(query);
        
        // 检查是否匹配标签筛选
        const matchesTags = selectedTags.length === 0 || 
                           selectedTags.some(selectedTag => 
                             tags.some(tag => tag.toLowerCase() === selectedTag.toLowerCase())
                           );
        
        return matchesSearch && matchesTags;
      });

      // 更新结果计数
      const searchResultsCount = document.getElementById('search-results-count');
      if (searchResultsCount) {
        const countSpan = searchResultsCount.querySelector('span');
        if (countSpan) {
          countSpan.textContent = filteredData.length;
        }
      }

      // 重置分页
      currentPage = 0;
      hasMore = true;
      
      // 清空现有卡片
      const promptList = document.getElementById('prompt-list');
      if (promptList) {
        promptList.innerHTML = '';
      }
      
      // 处理空状态
      const emptyState = document.getElementById('empty-state');
      if (filteredData.length === 0) {
        if (promptList) promptList.classList.add('hidden');
        if (emptyState) emptyState.classList.remove('hidden');
      } else {
        if (promptList) promptList.classList.remove('hidden');
        if (emptyState) emptyState.classList.add('hidden');
        
        // 加载第一页
        loadMore();
      }
    }

    // 渲染卡片
    function renderCard(item, index) {
      const name = item.name || '';
      const author = item.author || '';
      const tags = Array.isArray(item.tags) ? item.tags : [];
      const prompt = item.prompt || '';
      const usage = item.usage || '';
      const shortPrompt = prompt.length > 100 ? prompt.slice(0, 100) + '...' : prompt;
      const isLong = prompt.length > 100;
      const tagClass = typeColors[tags[0]] || typeColors['default'];
      const cardId = `prompt-card-${index}`;
      const avatarColor = getAvatarColor(author);
      const promptIcon = getPromptIcon(tags);
      
      const likeCount = (typeof item.like_count === 'number') ? item.like_count : Number(item.like_count) || 0;
      const viewCount = (typeof item.view_count === 'number') ? item.view_count : Number(item.view_count) || 0;
      
      // 高亮搜索关键词
      const highlightedName = highlightSearchResult(name, searchQuery);
      const highlightedUsage = highlightSearchResult(usage, searchQuery);
      const highlightedAuthor = highlightSearchResult(author, searchQuery);
      const highlightedTags = tags.map(tag => highlightSearchResult(tag, searchQuery)).join(', ');

      const card = document.createElement('div');
      card.className = 'bg-white rounded-xl shadow-sm overflow-hidden card-hover cursor-pointer transition-all duration-300 hover:shadow-lg hover:scale-105';
      card.setAttribute('data-category', tags.join(','));
      card.setAttribute('data-idx', index);
      
      card.innerHTML = `
        <div class="p-5 flex flex-col h-full prompt-content">
          <div class="flex items-start gap-4 mb-4">
            <div class="prompt-icon flex-shrink-0">
              <i class="${promptIcon}"></i>
            </div>
            <div class="flex-1 min-w-0">
              <h3 class="font-bold text-lg text-neutral-700 mb-2 leading-tight">${highlightedName}</h3>
              <div class="text-xs text-neutral-400 bg-neutral-50 px-2 py-1 rounded-full inline-block">${highlightedUsage}</div>
            </div>
          </div>
          <div class="text-xs text-neutral-300 mb-2">${item.create_time ? '创建时间：' + item.create_time : ''}</div>
          <p class="text-neutral-500 text-sm mb-4 line-clamp-3" id="${cardId}-content">${shortPrompt.replace(/\n/g, '<br>')}</p>
          ${isLong ? `<button class="text-xs text-primary hover:underline mb-4 self-start transition-colors duration-200" id="${cardId}-toggle">展开</button>` : ''}
          <div class="flex items-center justify-between mt-auto">
            <div class="flex items-center gap-[12px]">
              <span class="inline-block w-8 h-8 rounded-full ${avatarColor} flex items-center justify-center text-gray-700 text-xs font-bold transition-transform duration-200 hover:scale-110">${author[0] || '?'}</span>
              <span class="text-xs text-neutral-600">${highlightedAuthor}</span>
              <span class="flex items-center text-xs text-neutral-400 transition-colors duration-200 hover:text-primary"><i class="fa fa-thumbs-up mr-1"></i>${likeCount}</span>
              <span class="flex items-center text-xs text-neutral-400 transition-colors duration-200 hover:text-primary"><i class="fa fa-eye mr-1"></i>${viewCount}</span>
            </div>
            <span class="px-2 py-1 rounded-full text-xs font-semibold flex items-center gap-1 ${tagClass} transition-all duration-200 hover:scale-105"><i class="fa fa-tag"></i>${highlightedTags}</span>
          </div>
        </div>
      `;

      // 折叠/展开功能
      if (isLong) {
        setTimeout(() => {
          const btn = document.getElementById(`${cardId}-toggle`);
          const content = document.getElementById(`${cardId}-content`);
          let expanded = false;
          if (btn && content) {
            btn.addEventListener('click', (e) => {
              e.stopPropagation();
              expanded = !expanded;
              if (expanded) {
                content.innerHTML = prompt.replace(/\n/g, '<br>');
                btn.textContent = '收起';
              } else {
                content.innerHTML = shortPrompt.replace(/\n/g, '<br>');
                btn.textContent = '展开';
              }
            });
          }
        }, 0);
      }

      return card;
    }

    // 加载更多数据
    function loadMore() {
      if (loading || !hasMore) return;
      
      loading = true;
      
      const start = currentPage * pageSize;
      const end = Math.min(start + pageSize, filteredData.length);
      const promptList = document.getElementById('prompt-list');
      
      if (!promptList) return;
      
      for (let i = start; i < end; i++) {
        const card = renderCard(filteredData[i], i);
        promptList.appendChild(card);
      }
      
      currentPage++;
      hasMore = end < filteredData.length;
      loading = false;
    }

    // 显示详情弹窗
    function showModal(item) {
      const modal = document.getElementById('prompt-modal');
      const modalTitle = document.getElementById('modal-title');
      const modalPrompt = document.getElementById('modal-prompt');
      
      if (modal && modalTitle && modalPrompt) {
        modalTitle.textContent = item.name || '';
        modalPrompt.innerHTML = marked.parse(item.prompt || '');
        modal.classList.remove('hidden');
      }
    }

    // 初始化事件监听
    function initEventListeners() {
      // 搜索框事件
      const searchInput = document.getElementById('searchInput');
      const stickySearchInput = document.getElementById('stickySearchInput');
      
      function handleSearch() {
        filterData();
      }
      
      if (searchInput) {
        searchInput.addEventListener('input', debounce(handleSearch, 300));
      }
      
      if (stickySearchInput) {
        stickySearchInput.addEventListener('input', debounce(handleSearch, 300));
      }

      // 清除筛选按钮
      const clearFilters = document.getElementById('clearFilters');
      const stickyClearFilters = document.getElementById('stickyClearFilters');
      
      function clearAllFilters() {
        selectedTags = [];
        searchQuery = '';
        
        if (searchInput) searchInput.value = '';
        if (stickySearchInput) stickySearchInput.value = '';
        
        // 重置标签状态
        document.querySelectorAll('#filterTags button, #stickyFilterTags button').forEach(t => {
          t.classList.remove('tag-active');
          t.classList.add('bg-white', 'border', 'border-neutral-200', 'text-neutral-600');
          t.classList.remove('bg-primary', 'text-white');
        });
        
        // 激活"全部"按钮
        document.querySelectorAll('#filterTags button[data-category="全部"], #stickyFilterTags button[data-category="全部"]').forEach(t => {
          t.classList.add('tag-active');
          t.classList.remove('bg-white', 'border', 'border-neutral-200', 'text-neutral-600');
          t.classList.add('bg-primary', 'text-white');
        });
        
        filterData();
      }
      
      if (clearFilters) {
        clearFilters.addEventListener('click', clearAllFilters);
      }
      
      if (stickyClearFilters) {
        stickyClearFilters.addEventListener('click', clearAllFilters);
      }

      // 卡片点击事件
      const promptList = document.getElementById('prompt-list');
      if (promptList) {
        promptList.addEventListener('click', function(e) {
          let card = e.target;
          while (card && !card.classList.contains('card-hover') && card !== promptList) {
            card = card.parentElement;
          }
          
          if (card && card.classList.contains('card-hover')) {
            const idx = card.getAttribute('data-idx');
            const item = filteredData[idx];
            if (item) {
              showModal(item);
            }
          }
        });
      }

      // 弹窗关闭事件
      const modalClose = document.getElementById('prompt-modal-close');
      const modal = document.getElementById('prompt-modal');
      
      if (modalClose) {
        modalClose.addEventListener('click', () => {
          if (modal) modal.classList.add('hidden');
        });
      }
      
      if (modal) {
        modal.addEventListener('click', (e) => {
          if (e.target === modal) {
            modal.classList.add('hidden');
          }
        });
      }

      // 复制按钮事件
      const modalCopyBtn = document.getElementById('modal-copy-btn');
      const modalPrompt = document.getElementById('modal-prompt');
      
      if (modalCopyBtn && modalPrompt) {
        modalCopyBtn.addEventListener('click', () => {
          const text = modalPrompt.innerText;
          navigator.clipboard.writeText(text).then(() => {
            const icon = modalCopyBtn.querySelector('i');
            const oldClass = icon.className;
            icon.className = 'fa fa-check text-green-500';
            setTimeout(() => { icon.className = oldClass; }, 1200);
          });
        });
      }

      // 滚动加载
      window.addEventListener('scroll', () => {
        if (loading || !hasMore) return;
        
        const scrollBottom = window.innerHeight + window.scrollY;
        const docHeight = document.body.offsetHeight;
        
        if (docHeight - scrollBottom < 200) {
          loadMore();
        }
      });

      // 固定搜索区域显示/隐藏
      const stickySearchFilter = document.getElementById('stickySearchFilter');
      const searchFilterContainer = document.getElementById('searchFilterContainer');
      
      if (stickySearchFilter && searchFilterContainer) {
        window.addEventListener('scroll', function() {
          const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
          const searchFilterOffset = searchFilterContainer.offsetTop;
          
          if (scrollTop > searchFilterOffset + 100) {
            stickySearchFilter.classList.remove('-translate-y-full');
          } else {
            stickySearchFilter.classList.add('-translate-y-full');
          }
        });
      }
    }

    // 防抖函数
    function debounce(func, wait) {
      let timeout;
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout);
          func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      initEventListeners();
      loadData();
    });
  </script>

 <!-- 简洁页脚 -->
 <footer class="bg-gray-50 text-gray-500 py-8 border-t border-gray-200 mt-auto">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <div class="mb-2 text-base font-semibold text-gray-700 site-description"></div>
      <div class="text-xs text-gray-400 icp-number"></div>
  </div>
</footer>

<!-- JavaScript -->
<script src="../assets/js/common.js"></script>
<script>
  // 动态加载页脚信息
  async function loadFooterInfo() {
    try {
      const response = await fetch('../config.json');
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const config = await response.json();
      
      // 更新页脚信息
      const siteDescription = document.querySelector('.site-description');
      const icpNumber = document.querySelector('.icp-number');
      
      if (siteDescription && config.description) {
        siteDescription.textContent = config.description;
      }
      
      if (icpNumber && config.icp) {
        icpNumber.textContent = config.icp;
      }
    } catch (error) {
      console.error('加载页脚配置失败:', error);
    }
  }

  // 页面加载完成后加载页脚信息
  document.addEventListener('DOMContentLoaded', function() {
    loadFooterInfo();
  });
</script>

  <!-- marked.js for markdown rendering -->
  <style> 
  /* line-clamp 样式 */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  
  /* markdown-body样式可根据需要自定义，这里简单美化 */
  .markdown-body h1, .markdown-body h2, .markdown-body h3 {
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 0.5em;
  }
  .markdown-body ul, .markdown-body ol {
    margin-left: 1.5em;
    margin-bottom: 1em;
  }
  .markdown-body code {
    background: #f5f5f5;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.95em;
  }
  .markdown-body pre {
    background: #f5f5f5;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1em;
  }
  .markdown-body blockquote {
    border-left: 4px solid #d0d7de;
    color: #6a737d;
    padding-left: 1em;
    margin: 1em 0;
    background: #f9f9f9;
    border-radius: 4px;
  }
  .markdown-body table {
    border-collapse: collapse;
    margin-bottom: 1em;
  }
  .markdown-body th, .markdown-body td {
    border: 1px solid #e5e7eb;
    padding: 0.5em 1em;
  }
  
  /* 指令库头部优化样式 */
  .prompts-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%);
  }
  
  /* 搜索框悬停效果 */
  #searchInput:hover {
    border-color: #d1d5db;
  }
  
  /* 搜索框焦点效果优化 */
  #searchInput:focus {
    border-color: #FFE45C;
    box-shadow: 0 0 0 3px rgba(255, 228, 92, 0.1);
  }
  
  /* 输入框选中文本样式优化 */
  #searchInput::selection {
    background-color: rgba(255, 228, 92, 0.3);
    color: #1f2937;
  }
  
  #searchInput::-moz-selection {
    background-color: rgba(255, 228, 92, 0.3);
    color: #1f2937;
  }
  
  /* 清除筛选按钮悬停效果 */
  #clearFilters:hover {
    background-color: rgba(255, 228, 92, 0.1);
    transform: scale(1.05);
  }
  
  /* 标题文字渐变效果 */
  .prompts-header h1 {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* 描述文字优化 */
  .prompts-header p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  /* 流体动画优化 */
  .fluid-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .fluid-blob {
    position: absolute;
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, rgba(255, 228, 92, 0.15), rgba(255, 228, 92, 0.05), rgba(255, 228, 92, 0.1));
    animation: float 20s ease-in-out infinite;
    transform: rotate(45deg);
    box-shadow: 0 0 20px rgba(255, 228, 92, 0.1);
  }
  
  .blob-1 {
    width: 180px;
    height: 180px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }
  
  .blob-2 {
    width: 140px;
    height: 140px;
    top: 60%;
    right: 15%;
    animation-delay: -5s;
  }
  
  .blob-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 20%;
    animation-delay: -10s;
  }
  
  .blob-4 {
    width: 120px;
    height: 120px;
    top: 30%;
    right: 30%;
    animation-delay: -15s;
  }
  
  .blob-5 {
    width: 80px;
    height: 80px;
    top: 80%;
    left: 60%;
    animation-delay: -8s;
  }
  
  .blob-6 {
    width: 60px;
    height: 60px;
    bottom: 40%;
    right: 5%;
    animation-delay: -12s;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0px) rotate(45deg);
    }
    33% {
      transform: translateY(-20px) rotate(165deg);
    }
    66% {
      transform: translateY(10px) rotate(285deg);
    }
  }
  
  /* 移动端优化 */
  @media (max-width: 768px) {
    .prompts-header h1 {
      font-size: 2.5rem;
      line-height: 1.2;
    }
    
    .prompts-header p {
      font-size: 1rem;
      line-height: 1.6;
    }
  }
  
  /* 大屏幕优化 */
  @media (min-width: 1280px) {
    .prompts-header h1 {
      font-size: 4rem;
    }
    
    .prompts-header p {
      font-size: 1.25rem;
    }
  }
  
  /* 圆形图标样式 */
  .prompt-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFE45C 0%, #FFD700 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(255, 228, 92, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .prompt-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
  }
  
  .prompt-icon:hover::before {
    left: 100%;
  }
  
  .prompt-icon:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(255, 228, 92, 0.4);
  }
  
  /* 卡片悬停效果增强 */
  .card-hover {
    position: relative;
    overflow: hidden;
  }
  
  .card-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 228, 92, 0.1), transparent);
    transition: left 0.5s ease;
  }
  
  .card-hover:hover::before {
    left: 100%;
  }
  
  /* 卡片内容悬停效果 */
  .card-hover:hover .prompt-content {
    transform: translateY(-2px);
  }
  
  .prompt-content {
    transition: transform 0.3s ease;
  }
  

  
  /* 卡片加载动画 */
  @keyframes cardFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .card-hover {
    animation: cardFadeIn 0.6s ease-out;
  }
  
  /* 自定义鼠标指针 */
  .cursor-pointer {
    cursor: pointer;
  }
  
  .cursor-pointer:hover {
    cursor: pointer;
  }
  
  /* 按钮悬停效果 */
  button:hover {
    cursor: pointer;
  }
  
  /* 标签激活状态 */
  .tag-active {
    background-color: #FFE45C !important;
    color: white !important;
    border-color: #FFE45C !important;
  }
  
  /* 标签悬停效果 */
  .tag-active:hover {
    cursor: pointer;
  }
  
  /* 固定顶部搜索区域样式 */
  #stickySearchFilter {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  #stickySearchFilter input {
    background: rgba(255, 255, 255, 0.9);
  }
  
  #stickyFilterTags button {
    font-size: 12px;
    padding: 4px 8px;
  }
  
  /* 平滑过渡效果 */
  #stickySearchFilter {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* 搜索建议样式 */
  #searchSuggestions, #stickySearchSuggestions {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    border: 1px solid #e5e7eb;
  }
  
  #searchSuggestions .search-suggestion,
  #stickySearchSuggestions .search-suggestion,
  #searchSuggestions .search-history,
  #stickySearchSuggestions .search-history {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
  }
  
  #searchSuggestions .search-suggestion:last-child,
  #stickySearchSuggestions .search-suggestion:last-child,
  #searchSuggestions .search-history:last-child,
  #stickySearchSuggestions .search-history:last-child {
    border-bottom: none;
  }
  
  #searchSuggestions .search-suggestion:hover,
  #stickySearchSuggestions .search-suggestion:hover,
  #searchSuggestions .search-history:hover,
  #stickySearchSuggestions .search-history:hover {
    background-color: #f9fafb;
  }
  
  /* 高亮样式 */
  mark.bg-yellow-200 {
    background-color: #fef3c7 !important;
    color: #92400e;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 500;
  }
  
  /* 搜索框聚焦效果增强 */
  #searchInput:focus,
  #stickySearchInput:focus {
    border-color: #FFE45C;
    box-shadow: 0 0 0 3px rgba(255, 228, 92, 0.1);
    outline: none;
  }
  
  /* 搜索建议动画 */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  #searchSuggestions:not(.hidden),
  #stickySearchSuggestions:not(.hidden) {
    animation: slideDown 0.2s ease-out;
  }
  
  /* 加载状态样式 */
  .loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f4f6;
    border-radius: 50%;
    border-top-color: #FFE45C;
    animation: spin 1s ease-in-out infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* 搜索结果统计样式 */
  #search-results-count {
    background: linear-gradient(135deg, #FFE45C 0%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
  }
  
  /* 空状态优化 */
  #empty-state {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 16px;
    padding: 3rem 2rem;
    border: 2px dashed #cbd5e1;
  }
  
  #empty-state i {
    color: #94a3b8;
    font-size: 3rem;
  }
  
  /* 响应式优化 */
  @media (max-width: 768px) {
    #searchSuggestions,
    #stickySearchSuggestions {
      max-height: 200px;
    }
    
    .search-suggestion,
    .search-history {
      padding: 12px 16px;
      font-size: 14px;
    }
  }
  </style>
</body>
</html>
    